<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="home">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '首页',
  },
}
</route>
<template>
  <view class="home_container">
    <view class="top_box">
      <view class="first_content">
        <view class="left_box">
          <img src="../../static/images/ic_weather_cloudy.png" />
          <text>多云 26°</text>
        </view>
        <view class="right_box">
          <img src="../../static/images/img_sinotrans.png" />
        </view>
      </view>
      <view class="second_content">
        <wd-input
          prefix-icon="search"
          type="text"
          v-model="value"
          :placeholder="t('home.homeSearchHint')"
          @change="handleChange"
        />
      </view>
    </view>
    <view class="grid_box">
      <view
        class="grid_item_box"
        v-for="(item, index) in gridList"
        :key="index"
        @click="toPage(item)"
      >
        <img :src="item.icon" />
        <text>{{ item.text }}</text>
      </view>
    </view>
    <view class="msg_container">
      <view class="item">
        <view class="num_item">{{ newCount.ydg }}</view>
        <text>{{ t('home.homeBoatUnDo') }}</text>
      </view>
      <view class="line"></view>
      <view class="item">
        <view class="num_item">{{ newCount.md }}</view>
        <text>{{ t('home.homeService') }}</text>
      </view>
      <view class="line"></view>
      <view class="item">
        <view class="num_item">{{ newCount.bw }}</view>
        <text>{{ t('home.homeDid') }}</text>
      </view>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { ref, reactive, computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { getFiles } from '@/service/index/index'
const { t } = useI18n()

defineOptions({
  name: 'Home',
})

const value = ref<string>('')
function handleChange(event) {
  console.log(event)
}
const gridList = reactive([
  {
    icon: '../../static/images/ic_item_1.png',
    text: computed(() => t('home.homeBoatTask')),
    url: '',
  },
  {
    icon: '../../static/images/ic_item_2.png',
    text: computed(() => t('home.homeService')),
    url: '',
  },
  {
    icon: '../../static/images/ic_item_3.png',
    text: computed(() => t('home.homeNotice')),
    url: '/pages/notice/index',
  },
  {
    icon: '../../static/images/ic_item_4.png',
    text: computed(() => t('home.homePlay')),
    url: '',
  },
  {
    icon: '../../static/images/ic_item_5.png',
    text: computed(() => t('home.homeLocation')),
    url: '',
  },
  {
    icon: '../../static/images/ic_item_6.png',
    text: computed(() => t('home.homePlan')),
    url: '',
  },
  {
    icon: '../../static/images/ic_item_7.png',
    text: computed(() => t('home.homeLine')),
    url: '',
  },
  {
    icon: '../../static/images/ic_item_8.png',
    text: computed(() => t('home.homeDashboard')),
    url: '',
  },
])
// 点击跳转页面
const toPage = function (item) {
  console.log(item.url)
}

// 船舶数量
const count = reactive({
  ydg: '420',
  md: '14',
  bw: '7552',
})
// 获取屏幕边界到安全区域距离
// const { safeAreaInsets } = uni.getSystemInfoSync()

const newCount = computed(() => {
  const obj = reactive({ ydg: '0', md: '0', bw: '0' })
  obj.ydg = count.ydg && String(count.ydg).length > 3 ? '999+' : count.ydg
  obj.md = count.md && String(count.md).length > 3 ? '999+' : count.md
  obj.bw = count.bw && String(count.bw).length > 3 ? '999+' : count.bw
  return obj
})

async function initFetch() {
  const params = {
    id: '55273-f74f61dc6a8d4627a56af74be261100e',
  }
  await getFiles(params)
}
</script>

<style lang="scss" scoped>
.home_container {
  box-sizing: border-box;
  width: 100vw;
  height: calc(100vh - 50px);
  background-color: #f3f3f3;
  .top_box {
    box-sizing: border-box;
    width: 100vw;
    height: 600rpx;
    padding: 30rpx;
    background-image: url(../../static/images/home_bg.png);
    background-size: 100% 100%;
    .first_content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .left_box {
        display: flex;
        align-items: center;
        font-size: 24rpx;
        color: #e4eaf3;
        img {
          width: 40rpx;
          margin-right: 14rpx;
        }
      }
      .right_box {
        img {
          width: 150rpx;
        }
      }
    }
    .second_content {
      margin-top: 30rpx;
      .wd-input {
        padding: 0 30rpx;
        border: none;
        border-radius: 32px;
        ::v-deep .uni-input-placeholder {
          color: #868686;
        }
        ::v-deep .wd-input__icon {
          vertical-align: top;
        }
        &::after {
          height: 0;
        }
      }
    }
  }
  .grid_box {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding: 16rpx 32rpx 0rpx 32rpx;
    margin-top: 18rpx;
    background-color: #ffffff;

    .grid_item_box {
      display: flex;
      flex: 1;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: calc((100% - 80rpx) / 4);
      min-width: calc((100% - 80rpx) / 4);
      max-width: calc((100% - 80rpx) / 4);
      height: 120rpx;
      margin-right: 20rpx;
      margin-bottom: 16rpx;
      text-align: center;
      border-radius: 12rpx;

      &:nth-child(4n) {
        margin-right: 0;
      }

      // .home_container .top_box .first_content .left_box img

      img {
        height: 45rpx;
        margin-bottom: 18rpx;
      }

      text {
        font-size: 22rpx;
        line-height: 24rpx;
        color: #727375;
      }
    }
  }

  .msg_container {
    display: flex;
    align-items: center;
    height: 154rpx;
    margin-top: 16rpx;
    text-align: center;
    background-color: #fff;

    .line {
      // width: 0.5%;
      height: 50%;
      background-color: #fff;
      border-right: 3rpx solid #eeeeee;
    }
    .item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 33%;
      height: 100%;
      background-color: #ffffff;

      .num_item {
        width: 100%;
        font-size: 44rpx;
        font-weight: 500;
        line-height: 60rpx;
        color: #f77337;
      }
      &:nth-child(3) {
        .num_item {
          color: #7e7e7e;
        }
      }
      &:nth-child(5) {
        .num_item {
          color: #3b956d;
        }
      }

      text {
        font-size: 24rpx;
        font-weight: 500;
        line-height: 32px;
        color: #646464;
      }
    }
  }
}
</style>
